'use client'

import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore, AppStore } from '../lib/store'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

export default function StoreProvider({
    children
}: {
    children: React.ReactNode
}) {
    const storeRef = useRef<AppStore | null>(null)
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const persistor = useRef<any | null>(null)
    if (!storeRef.current) {
        // Create the store instance the first time this renders
        storeRef.current = makeStore()
        persistor.current = persistStore(storeRef.current)
    }

    return (
        <>
            <Provider store={storeRef.current}>
                <PersistGate loading={null} persistor={persistor.current}>
                    {children}
                </PersistGate>
            </Provider>
        </>
    )
}